<template>
  <!-- 右侧菜单 -->
  <el-container
    v-loading="loading"
    class="ik-container"
  >
    <!-- 顶部标题信息 -->
    <el-header height="42px">
      <span class="ik-board-title">
        <span class="logo" />
        供应商总貌
        <div class="time">
          <span>{{ time }}</span>
        </div>
      </span>
    </el-header>

    <!-- 数据区 -->
    <el-main>
      <!-- 表格区 -->
      <el-row
        :gutter="20"
        class="board-row"
      >
        <el-col
          :span="24"
          class="board-col"
          style="height: 450px"
        >
          <ik-table-base
            code="1"
            title="供应商详情"
            :data="[
              { code: 'S_0001', name: '供应商1', currentAmount: 70, totalAmount: 30, currentQuantity: 30, totalQuantity: 30,
                timelinessAmount: 30, timelinessRate: 30, returnAmount: 30, returnRate: 30, defectiveAmount: 30, defectiveRate: 30 },
              { code: 'S_0002', name: '供应商2', currentAmount: 80, totalAmount: 30, currentQuantity: 30, totalQuantity: 30,
                timelinessAmount: 30, timelinessRate: 30, returnAmount: 30, returnRate: 30, defectiveAmount: 30, defectiveRate: 30 },
              { code: 'S_0003', name: '供应商3', currentAmount: 90, totalAmount: 30, currentQuantity: 30, totalQuantity: 30,
                timelinessAmount: 30, timelinessRate: 30, returnAmount: 30, returnRate: 30, defectiveAmount: 30, defectiveRate: 30 },
              { code: 'S_0004', name: '供应商4', currentAmount: 100, totalAmount: 30, currentQuantity: 30, totalQuantity: 30,
                timelinessAmount: 30, timelinessRate: 30, returnAmount: 30, returnRate: 30, defectiveAmount: 30, defectiveRate: 30 },
              { code: 'S_0005', name: '供应商5', currentAmount: 110, totalAmount: 30, currentQuantity: 30, totalQuantity: 30,
                timelinessAmount: 30, timelinessRate: 30, returnAmount: 30, returnRate: 30, defectiveAmount: 30, defectiveRate: 30 },
              { code: 'S_0006', name: '供应商6', currentAmount: 120, totalAmount: 30, currentQuantity: 30, totalQuantity: 30,
                timelinessAmount: 30, timelinessRate: 30, returnAmount: 30, returnRate: 30, defectiveAmount: 30, defectiveRate: 30 },
              { code: 'S_0007', name: '供应商7', currentAmount: 130, totalAmount: 30, currentQuantity: 30, totalQuantity: 30,
                timelinessAmount: 30, timelinessRate: 30, returnAmount: 30, returnRate: 30, defectiveAmount: 30, defectiveRate: 30 },
              { code: 'S_0008', name: '供应商8', currentAmount: 140, totalAmount: 30, currentQuantity: 30, totalQuantity: 30,
                timelinessAmount: 30, timelinessRate: 30, returnAmount: 30, returnRate: 30, defectiveAmount: 30, defectiveRate: 30 },
              { code: 'S_0009', name: '供应商9', currentAmount: 150, totalAmount: 30, currentQuantity: 30, totalQuantity: 30,
                timelinessAmount: 30, timelinessRate: 30, returnAmount: 30, returnRate: 30, defectiveAmount: 30, defectiveRate: 30 },
              { code: 'S_0010', name: '供应商10', currentAmount: 160, totalAmount: 30, currentQuantity: 30, totalQuantity: 30,
                timelinessAmount: 30, timelinessRate: 30, returnAmount: 30, returnRate: 30, defectiveAmount: 30, defectiveRate: 30 }
            ]"
            :columns="[
              { prop: 'code', label: '供应商编码', width: 150 },
              { prop: 'name', label: '供应商名称', width: 150 },
              { prop: 'currentAmount', label: '本期税价合计', width: 120, warningMin: 100, warningMax: 120, errorMin: 80, errorMax: 150 },
              { prop: 'totalAmount', label: '累计税价合计', width: 120 },
              { prop: 'currentQuantity', label: '本期数量合计', width: 120 },
              { prop: 'totalQuantity', label: '累计数量合计', width: 120 },
              { prop: 'timelinessAmount', label: '及时税价合计', width: 120 },
              { prop: 'timelinessRate', label: '及时率', width: 120 },
              { prop: 'returnAmount', label: '退货税价合计', width: 120 },
              { prop: 'returnRate', label: '退货率', width: 120 },
              { prop: 'defectiveAmount', label: '次品税价合计', width: 120 },
              { prop: 'defectiveRate', label: '次品率', width: 120 }
            ]"
          />
        </el-col>
      </el-row>

      <!-- 图表区 -->
      <el-row
        :gutter="20"
        class="board-row"
      >
        <!-- 供应商五维 -->
        <el-col
          :span="6"
          class="board-col"
          style="  height: 350px"
        >
          <ik-radar-area-chart
            code="1-1"
            title="供应商五维"
            :data="[
              {'key':'物料价格', 'value': 9.63},
              {'key':'物料品质', 'value': 8.72},
              {'key':'如期交货', 'value': 8.37},
              {'key':'服务水品', 'value': 9.72},
              {'key':'信用程度', 'value': 9.37}
            ]"
            data-dimension-field="value"
            data-dimension-max="10"
            first-analysis-dimension-field="key"
          />
        </el-col>
        <!-- 供应问题时序 -->
        <el-col
          :span="12"
          class="board-col"
          style="  height: 350px"
        >
          <ik-bar-time-chart
            code="1-2"
            title="供应问题时序"
            :data="[
              { type: '超时品税价', time: '2024-01-01 00:00:00', value: '72.97' },
              { type: '不良品税价', time: '2024-01-01 00:00:00', value: '62.94' },
              { type: '退货品税价', time: '2024-01-01 00:00:00', value: '87.75' },
              { type: '超时品税价', time: '2024-02-01 00:00:00', value: '63.97' },
              { type: '不良品税价', time: '2024-02-01 00:00:00', value: '26.52' },
              { type: '退货品税价', time: '2024-02-01 00:00:00', value: '17.82' },
              { type: '超时品税价', time: '2024-03-01 00:00:00', value: '43.47' },
              { type: '不良品税价', time: '2024-03-01 00:00:00', value: '14.63' },
              { type: '退货品税价', time: '2024-03-01 00:00:00', value: '64.28' },
              { type: '超时品税价', time: '2024-04-01 00:00:00', value: '24.92' },
              { type: '不良品税价', time: '2024-04-01 00:00:00', value: '52.13' },
              { type: '退货品税价', time: '2024-04-01 00:00:00', value: '15.74' }
            ]"
            time-dimension-start="2024-01-01 00:00:00"
            time-dimension-end="2024-04-01 00:00:00"
            time-dimension-uom="month"
            time-dimension-field="time"
            data-dimension-field="value"
            analysis-dimension-field="type"
          />
        </el-col>
        <!-- 质量分布 -->
        <el-col
          :span="6"
          class="board-col"
          style="  height: 350px"
        >
          <ik-pie-base-chart
            code="1-3"
            title="质量分布"
            :data="[
              {'key':'参数异常', 'value': '22.67'},
              {'key':'外观异常', 'value': '12.13'},
              {'key':'重量异常', 'value': '12.92'},
              {'key':'保质异常', 'value': '7.67'}
            ]"
            data-dimension-field="value"
            analysis-dimension-field="key"
          />
        </el-col>
      </el-row>
    </el-main>

    <!-- 底部页脚信息 -->
    <el-footer height="36px">
      <el-row :gutter="0">
        <el-col :span="12">
          <span class="ik-footer-info" style="float: left">底部标签</span>
        </el-col>
      </el-row>
    </el-footer>
  </el-container>
</template>

<script>

// bar
import IkBarTimeChart from "@/components/ik/board/chart/bar/time/IkBarTimeChart"
import IkPieBaseChart from "@/components/ik/board/chart/pie/base/IkPieBaseChart"
import IkRadarAreaChart from "@/components/ik/board/chart/radar/area/IkRadarAreaChart"
// table
import IkTableBase from "@/components/ik/board/table/IkTableBase"

export default {
  components: {
    // Chart
    IkBarTimeChart,
    IkPieBaseChart,
    IkRadarAreaChart,
    IkTableBase
  },
  props: {
  },
  data() {
    return {
      pagination: {
        pageNo: 1,
        pageSize: 20,
        totalCount: 5
      },
      loading: false,
      listLoading: false,
      sysTitle: '',
      timer: null,
      time: '2024-04-28 00:00:00'
    }
  },
  computed: {
  },
  watch: {
  },
  created() {
  },
  mounted() {
    const $this = this
    $this.timer = setInterval(function() {
      // $this.$set($this, 'time', new Date().toLocaleString())
    }, 1000)
  },
  beforeDestroy() {
    // 清楚定时器
    clearInterval(this.timer)
  },
  methods: {
  }
}
</script>

<style lang="scss" >
@import "~@/components/ik/board/styles/board.scss";
.ik-container {
  position: relative;
  width: 100%;
  min-height: 1080px;
  background-image: url("~@/assets/robot/bgmap2.png");
  overflow: auto !important;
}
.el-header {
  position: absolute;
  z-index: 99;
  top: 0;
  height: 42px;
  width: 100%;
  background-image: url("~@/assets/ik/images/board/title.png");
  background-size: 100% 100%;
  color: white;
  font-weight: 800;
  line-height: 50px;
  text-align: center;
  .logo {
    position: absolute;
    left: 0;
    height: 42px;
    width: 155px;
    background-image: url("~@/assets/robot/logo.png");
    background-size: 100% 100%;
  }
  .time {
    position: absolute;
    top: 0;
    right: 15px;
    line-height: 50px;
    font-size: 13px;
    height: 50px;
    span {
      vertical-align: middle;
    }
  }
}

.el-main {
  position: relative;
  top: 42px;
  height: calc(100vh - 88px);
  padding: 0px;
  text-align: center;
}

.el-footer {
  height: 36px;
  background-color: #1482f0;
  color: #FFFFFF;
  /* 页脚 */
  .ik-footer-info {
    height: 36px;
    line-height: 36px;
    background-color: #1482f0;
    color: #FFFFFF;
  }
}
</style>
